<template>
  <div class="container">
    <el-card class="list-box">
      <div slot="header" class="table_header">
        <span>绩效流程列表</span>
        <div>
          <router-link :to="'/form/processadd'">
            <el-button size="small" type="primary">新增</el-button>
          </router-link>
          <!-- <el-button size="small" type="default">导出</el-button> -->
          <el-button icon="el-icon-refresh-right" circle @click="handleRefresh" />
        </div>
      </div>
      <div class="list-container">
        <el-table
          :data="tableData"
          border
          show-overflow-tooltip
          stripe
          style="width: 100%"
        >
          <el-table-column
            v-for="(column,index) in columns"
            :key="index"
            :prop="column.prop"
            :label="column.lable"
            show-overflow-tooltip
            :width="column.width || ''"
          >
            <template slot-scope="scope">
              <el-switch
                v-if="column.prop === 'status'"
                class="statusSwitchStyle"
                :value="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-text=""
                active-color="#42b983"
                :inactive-text="getStatusText(scope.row.status)"
                @change="handleStatusChange(scope.$index ,$event)"
              />
              <span v-else> {{ formatter(scope.row,column.prop) }}</span>

            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" :width="70" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleEdit(scope)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-if="totalPages>0"
        :total="totalPages"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        :layout="pageLayout"
        @pagination="handlePageClick"
      />
    </el-card>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'FormManegerList',
  components: { Pagination },
  data() {
    return {

      searchLoad: false,
      totalPages: 10,
      listQuery: {
        current: 1,
        size: 10
      },
      pageLayout: 'total, prev, pager, next, jumper',

      tableData: [],
      columns: [
        {
          lable: '名称',
          show: true,
          prop: 'templateName'

        },
        {
          lable: '参与人数',
          show: true,
          prop: 'participation'

        },
        {
          lable: '备注',
          show: true,
          prop: 'remark',
          width: 400
        },
        {
          lable: '状态',
          show: true,
          prop: 'status'

        },
        {
          lable: '更新时间',
          show: true,
          prop: 'updateTime'

        }

      ]
    }
  },
  created() {
    const params = {
      flowType: 1,
      current: this.listQuery.current,
      size: this.listQuery.size
    }
    this.getLists(params)
  },
  methods: {
    handleReset(formName) {
      this.$refs[formName].resetFields()
    },
    // handleSearch(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.listQuery.current = 1
    //       const params = Object.assign({}, params, this.listQuery)
    //       this.getLists(params)
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // },
    // getParams() {
    //   const query = {}
    //   const { listQuery } = this
    //   const searchForm = this.searchForm
    //   for (const i in searchForm) {
    //     if (searchForm[i]) {
    //       query[i] = searchForm[i]
    //     }
    //   }
    //   return Object.assign({}, query, listQuery)
    // },
    handlePageClick() {
      const params = {
        flowType: 1,
        current: this.listQuery.current,
        size: this.listQuery.size
      }
      this.getLists(params)
    },
    handleInsert() {

    },
    handleRefresh() {
      const params = {
        flowType: 1,
        current: this.listQuery.current,
        size: this.listQuery.size
      }
      this.getLists(params)
    },
    formatter(row, prop) {
      const value = row[prop]
      return value
    },
    async getLists(params) {
      if (this.searchLoad) return
      this.searchLoad = true
      try {
        const response = await this.$Http.getFlowTemplateinfoPageList(params)
        const { result } = response
        if (result && result.resultData) {
          this.tableData = result.resultData
          this.totalPages = result.totalRows
        }
        this.searchLoad = false
      } catch (err) {
        this.searchLoad = false
      }
    },
    handleEdit({ row, $index }) {
      this.$router.push({ path: '/form/processedit', query: { id: row.id }})
    },
    handleStatusChange(index, e) {
      const { tableData } = this
      const row = tableData[index]
      const { id } = row
      const { confirmChangeStatus } = this
      const msg = `确定改变这条记录的状态吗？`
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmChangeStatus(id, index, e)
      }).catch(() => {

      })
    },
    handleDelete({ row, $index }) {
      const { id } = row
      const { confirmDelete } = this
      const msg = `确定删除这条记录吗？删除后可能无法恢复`
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmDelete(id, $index)
      }).catch(() => {

      })
    },
    // 修改状态
    async confirmChangeStatus(id, index, e) {
      try {
        const params = {
          id: id,
          status: e
        }
        const res = await this.$Http.setModifyState(params)
        console.log('res', res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          const params = {
            flowType: 1,
            current: this.listQuery.current,
            size: this.listQuery.size
          }
          this.getLists(params)
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      } catch (err) {
        this.$message({
          type: 'error',
          message: err
        })
      }
    },
    async confirmDelete(id, index) {
      try {
        // await saveCarInfo({ id: data.id, status: 0, deleted: 0 })
        // this.$emit('refresh')
        this.$message({
          type: 'success',
          message: '解除成功!'
        })
      } catch (err) {
        this.$message({
          type: 'error',
          message: err
        })
      }
    },
    getStatusText() {}
  }
}
</script>
<style lang="scss" scoped>
    .container{
        padding:10px 10px 0 10px;
        .list-box{
            // margin-top:10px;
            .table_header{
                display:flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
</style>

